<!DOCTYPE html>
<html>
<head>
	<title>订单记录</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=no, maximum-scale=1.0"/>
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
    <meta content="telephone=no" name="format-detection" />
    <link href="css/user.css" rel="stylesheet">
    <script src="js/jquery-2.1.4.min.js"></script>
    <style>
		body{
			background-color:#F3F3F3;
		}	
	</style>
</head>
<body>
	<header class="header">
    	<a href="user-index.html">
    	<div class="header-left">
            <img src="images/back.png" class="back">
            <span class="back-name">我</span>
        </div>
        </a>
        <span class="name">订单记录</span>
        <div class="header-right">
        	<a href="index.html">
        	<img src="images/home.png" class="edit">
            </a>
        </div>
    </header>
    
    <div class="order-main">
    	<ul>
        	<li><span class="account-main-fl select">全部</span></li>
            <li><span class="account-main-fl">进行中</span></li>
            <li><span class="account-main-fl">已揭晓</span></li>
        </ul>
        <div class="clear"></div>
    </div>
    
    <!--进行中-->
    <div class="order-page">
    	<ul>
        	<li>
            	<a href="order-info.html">
            	<img src="images/goods.jpg" class="order-goods-img">
                </a>
                <span class="order-goods-name">全新2015年雅马哈Tricjty125现货,打折...</span><br />
                <span class="order-state">进行中</span>
                <div class="bar-out"><div class="bar-in"></div></div>
                <div class="order-goods-num">
                	<ul>
                    	<li>
                        	<span class="font-red order-cy">186</span><br />
                            <span class="font-gray">已参与</span>
                        </li>
                        <li>
                        	<span class="font-red order-zg">5288</span><br />
                            <span class="font-gray">总参与人数</span>
                        </li>
                        <li>
                        	<span class="font-red">5101</span><br />
                            <span class="font-gray">剩余</span>
                        </li>
                    </ul>
                </div>
            </li>
            
            <li>
            	<img src="images/goods.jpg" class="order-goods-img">
                <span class="order-goods-name">全新2015年雅马哈Tricjty125现货,打折...</span><br />
                <span class="order-state">进行中</span>
                <div class="bar-out"><div class="bar-in"></div></div>
                <div class="order-goods-num">
                	<ul>
                    	<li>
                        	<span class="font-red order-cy">186</span><br />
                            <span class="font-gray">已参与</span>
                        </li>
                        <li>
                        	<span class="font-red order-zg">5288</span><br />
                            <span class="font-gray">总参与人数</span>
                        </li>
                        <li>
                        	<span class="font-red">5101</span><br />
                            <span class="font-gray">剩余</span>
                        </li>
                    </ul>
                </div>
            </li>
            
            <li>
            	<img src="images/goods.jpg" class="order-goods-img">
                <span class="order-goods-name">全新2015年雅马哈Tricjty125现货,打折...</span><br />
                <span class="order-state">进行中</span>
                <div class="bar-out"><div class="bar-in"></div></div>
                <div class="order-goods-num">
                	<ul>
                    	<li>
                        	<span class="font-red order-cy">186</span><br />
                            <span class="font-gray">已参与</span>
                        </li>
                        <li>
                        	<span class="font-red order-zg">5288</span><br />
                            <span class="font-gray">总参与人数</span>
                        </li>
                        <li>
                        	<span class="font-red">5101</span><br />
                            <span class="font-gray">剩余</span>
                        </li>
                    </ul>
                </div>
            </li>
            
            <li>
            	<img src="images/goods.jpg" class="order-goods-img">
                <span class="order-goods-name">全新2015年雅马哈Tricjty125现货,打折...</span><br />
                <span class="order-state">进行中</span>
                <div class="bar-out"><div class="bar-in"></div></div>
                <div class="order-goods-num">
                	<ul>
                    	<li>
                        	<span class="font-red order-cy">186</span><br />
                            <span class="font-gray">已参与</span>
                        </li>
                        <li>
                        	<span class="font-red order-zg">5288</span><br />
                            <span class="font-gray">总参与人数</span>
                        </li>
                        <li>
                        	<span class="font-red">5101</span><br />
                            <span class="font-gray">剩余</span>
                        </li>
                    </ul>
                </div>
            </li>
        </ul>
    </div>
    
    <!--已揭晓-->
    <div class="order-page">
    	<ul>
        	<li>
            	<a href="order-info.html">
            	<img src="images/goods.jpg" class="order-goods-img">
                </a>
                <span class="order-goods-name">全新2015年雅马哈Tricjty125现货,打折...</span><br />
                <span class="order-state-1">已揭晓</span><br />
                <span class="zj-num">中奖号码：100279</span><br />
                <span class="jx-time">揭晓时间：2016-06-07 10:00</span>
                <img src="images/shanchu.png" class="order-del-img">
            </li>
            
            <li>
            	<img src="images/goods.jpg" class="order-goods-img">
                <span class="order-goods-name">全新2015年雅马哈Tricjty125现货,打折...</span><br />
                <span class="order-state-1">已揭晓</span><br />
                <span class="zj-num">中奖号码：100279</span><br />
                <span class="jx-time">揭晓时间：2016-06-07 10:00</span>
                <img src="images/shanchu.png" class="order-del-img">
            </li>
        </ul>
    </div>
    
    
<script>
	$(document).ready(function(e) {
        $(".order-main ul li").click(function(){
			$(".account-main-fl").removeClass("select");
			var sw=$(".order-main ul li").index(this);
			$(".order-main ul li").eq(sw).children("span").addClass("select");
			if(sw==0){
				$(".order-page").show();
			}else{
				sw=sw-1;
				$(".order-page").eq(sw).show().siblings(".order-page").hide();
			}
		})
		$(".order-del-img").click(function(){
			if(confirm("确认删除吗")){
				alert("yes");
			}else{
				alert("no")
				return;
			}
		})
    });
</script>
<script>
	var len=$(".order-page>ul>li").length;
	var out=$(".bar-out").width();
	for(var i=0;i<len;i++)
	{
		var cy=$(".order-cy").eq(i).text();
		var cyNum=parseInt(cy);
		var zx=$(".order-zg").eq(i).text();
		var zxNum=parseInt(zx);
		var ra=cyNum/zxNum;
		var w=out*ra;
		$(".bar-in").eq(i).width(w);
	}
</script>
</body>
</html>
